语法
animation-iteration-count: <number>|infinite; 指定对象动画循环播放的次数。
| 语法项目 | 说明 |
|---|---|
| 初始值 | 1 |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
检索或设置对象动画的循环次数
如果提供多个属性值，以逗号进行分隔。
取值
number：自定义动画执行次数，设置值可为0或正整数。
infinite：无限循环。
实例代码
CSS
.demo_box{
-webkit-animation:f1 2s 0.5s forwards linear;
-moz-animation:f1 2s 0.5s forwards linear;
position:relative;
left:10px;
width:100px;
height:100px;
margin:10px 0;
overflow:hidden;
}
.one{
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
}
.infinite{
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
.some{
-webkit-animation-iteration-count:2,1;
-moz-animation-iteration-count:2,1;
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
HTML
运行一下 »
<div class="demo_box one">动画执行1次</div> <div class="demo_box infinite">动画执行无数次</div> <div class="demo_box some">这个不知道</div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |